<template>
  <div class="right flex1">
    <h2 class="colorF textC" style="padding: 2.5rem; color: rgb(255,255,255,0.8);">月份呼叫记录统计</h2>
    <slot><div id="echarts_a"></div></slot>
  </div>
</template>

<script>
export default {
  name: 'right_one',
  props: ['query'],
  data () {
    return {
      // top榜
      orderNumList: [],
      areaList: []
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // top榜
      console.log(this.query.cityThreeJdCodeKey)
      this.$http.post(this.$api.Hqjdehjsl.hqjdehjsl, 'jdcode=' + this.query.cityThreeJdCodeKey, true).then(result => {
        let arr = result.data.response
        // console.log('16.获取街道的呼叫数量(会按照月份自动分类)', arr)

        for (let val of arr) {
          this.areaList.push(val.months)
          this.orderNumList.push(val.num)
        }
        this.orderSumFun(this.areaList.reverse(), this.orderNumList.reverse())
      })
    },
    orderSumFun (arrX, arrY) {
      var myCharts = this.$echarts.init(document.getElementById('echarts_a'))
      myCharts.setOption({
        tooltip: {
          trigger: 'axis',

          textStyle: {
            color: '#6a717b'
          }
        },
        grid: {
          top: '0%',
          left: '5%',
          right: '11%',
          bottom: '0%',
          containLabel: true
        },
        yAxis: [
          {
            type: 'category',
            data: arrX,
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            inverse: true,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 12,
                color: 'white'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#2548ac'
              }
            }
          }
        ],
        xAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true, // 这行代码控制着坐标轴y轴的文字是否显示
              color: '#fff',
              fontWeight: 100
            },
            // axisLabel: {
            //     show: false //这行代码控制着坐标轴x轴的文字是否显示
            // },
            axisLine: {
              lineStyle: {
                // color:'#fff', // x坐标轴的轴线颜色
                width: 0 // 这里是坐标轴的宽度,为0就是不显示
              }
            }
          }
        ],
        series: [
          {
            name: 'Top 10',
            type: 'bar',
            barWidth: 26,
            data: arrY,
            // data: [200, 250, 300, 120, 100, 200, 300, 190, 210, 300, 270, 200],
            label: {
              normal: {
                show: true,
                position: 'insideRight',
                textStyle: {
                  color: 'blue', // color of value
                  fontSize: 12
                }
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: '#0590eb' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#08e3f1' // 100% 处的颜色
                    }
                  ],
                  false
                ),
                barBorderRadius: [0, 15, 15, 0],
                shadowColor: 'rgba(0,0,0,0.1)',
                shadowBlur: 3,
                shadowOffsetY: 3
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.right {
  width: 100%;
  height: 100%;
  background: url(../../../assets/img/zeya/right.png) no-repeat;
  background-size: 100% 100%;
  #echarts_a {
    height: 85%;
    width: 100%;
  }
}
</style>
